/**
 * 具体项目介绍 t1 t2 t3 ...
 * 
 */

import { Link, NavLink, Route } from 'react-router-dom'
import React, { Component } from 'react';
import ajax from '../utils/ajax.js';

import ProjectBuilding from './ProjectBuilding';

const Content = (props) => (
    <div className="itemContent">
        <div className={props.itemName}>
            <Link className="returnBtn" to="/projectHome" >返回</Link>
            <div className="intro left_intro" id="ProjectIntroWrapper">
                <div id="ProjectIntroScroller">
                    <p className="title">{props.name + "项目介绍"}</p>
                    <p className="text-content">{props.data.des}</p>
                </div>
            </div>
        </div>
    </div>
);



class projectBuildings extends Component {

    constructor(props) {
        super(props);

        this.state = {
            buildingIntroData: null, // 楼栋介绍信息
            buildingData: null, // 所有楼栋详细信息,
            curBuildingData: null, // 当前楼栋详细信息
            itemName: 'cchItem'
        }

        this.clickTBtn = this.clickTBtn.bind(this);
        this.closeBuilding = this.closeBuilding.bind(this);
    }

    componentDidMount() {
        // buildingIntroData
        // 请求当前项目的数据
        var ar = this.props.path.split('/');
        var name = ar[ar.length - 1];
        ajax({
            url: '/cch?projName=' + name, headers: [{ 'Authorization': localStorage.getItem('token') }]
        }, function (e) {
            this.setState({ buildingData: e, curBuildingData: e[0].data })  // 默认显示T1的信息
        }.bind(this))

        this.setState({ itemName: name + 'Item' });
    }

    // 选择楼栋(T1 T2 T3)
    clickTBtn = (e) => {

        // 当选择一个楼栋时，应该先关闭相应楼栋的楼层显示信息页面 （projectBuilding）

        // 切换楼栋的介绍数据
        for (let i = 0; i < this.props.data.buildingDes.length; i++) {
            if (this.props.data.buildingDes[i].name === e.target.text) {
                this.setState({ buildingIntroData: this.props.data.buildingDes[i] })
            }
        }

        // 切换楼栋的详细数据
        const projData = this.state.buildingData;
        for (let i = 0; i < projData.length; i++) {
            if (projData[i].BldFullName.indexOf(e.target.text) > -1) {
                this.setState({ curBuildingData: projData[i].data })
            }
        }

        console.log(e.target.text);

        // 改变TBtn的状态
        const parent = e.target.parentElement.parentElement;
        for (let i = 0; i < parent.children.length; i++) {
            parent.children[i].children[0].className = "";
        }
        e.target.className = "active";

    }

    // 关闭楼栋介绍
    closeBuilding = () => {
        // 重置Tbtn的样式
        for (let i = 0; i < this.refs.myul.children.length; i++) {
            this.refs.myul.children[i].children[0].className = "";
        }
        // 关闭楼栋介绍
        this.setState({ buildingIntroData: null })
    }

    render() {

        const bd = this.props.data.buildingDes;

        let Tbtn = null;
        if (this.state.buildingData && this.state.curBuildingData) {
            Tbtn = <div className="bottom_nav" id="bottomNav">
                <ul ref="myul">
                    {bd ? (bd.map((item, i) => (
                        <li key={i}>
                            {/* /project/cch/cch-t1 */}
                            <NavLink onClick={this.clickTBtn} to={this.props.path + '/' + item.alias} >{item.name}</NavLink>
                        </li>
                    ))) : ""}
                </ul>
            </div>
        } else {
            Tbtn = <div className="bottom_nav" id="bottomNav">
                <ul ref="myul">
                    <li><a className="highlight_int" href="#">正在加载数据...</a></li>
                </ul>
            </div>
        }

        return (
            <div>
                <Content {...this.props} itemName={this.state.itemName} />

                {Tbtn}

                {bd ? (bd.map((item, i) => (
                    <Route key={i} path={this.props.path + '/' + item.alias} render={() => (
                        <ProjectBuilding buildingIntroData={this.state.buildingIntroData}
                            curBuildingData={this.state.curBuildingData}
                            closeBuilding={this.closeBuilding}
                            parentPath={this.props.path}
                            path={this.props.path + '/' + item.alias} />
                    )} />
                ))) : ""}

                {/* 建筑详细信息页面 */}
                {/*{routes.map((route, i) => (
                    <Route  {...route} render={() => (
                        <ProjectBuilding buildingIntroData={this.state.buildingIntroData}
                            curBuildingData={this.state.curBuildingData}
                            closeBuilding={this.closeBuilding} />
                    )} />
                ))}*/}

            </div>
        )

    }
}

export default projectBuildings;